<template>
  <div class="person_homeView">
    <el-card class="top_nav" :shadow="shadowShow">
      <div class="tit-btn">
        <el-button
          type="primary"
          :size="optionButtonSize"
          @click="(dialogVisible = true), (title = '添加')"
          >{{ $t('add.add54') }}</el-button
        >
        <!-- <el-button plain :size="optionButtonSize">{{ $t('patient.huanzhe17') }}</el-button>
                <el-button @click="delete1" plain :size="optionButtonSize">{{ $t('add.add020') }}</el-button> -->
      </div>
    </el-card>
    <el-card :shadow="shadowShow" class="partner_inner">
      <el-table
        :data="tableData"
        style="width: 100%"
        size="mini"
        :header-cell-style="headercellstyle"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" prop="paramValue" label="类型名称" />
        <el-table-column align="center" prop="paramType" :label="$t('add.add130')">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            {{ scope.row.paramType == 1 ? '正常' : '禁用' }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="remark" label="备注"></el-table-column> -->
        <el-table-column align="center" prop="createDate" :label="$t('add.add134')" width="160" />
        <el-table-column align="center" :label="$t('add.add131')" min-width="150">
          <template slot-scope="scope" style="display: flex; justify-content: flex-start">
            <el-button type="text" :size="tableButtonSize" @click="addItem(scope.row)">{{
              $t('add.add132')
            }}</el-button>
            <el-button type="text" :size="tableButtonSize" @click="updateItem(scope.row)">{{
              $t('patient.huanzhe17')
            }}</el-button>
            <el-button type="text" :size="tableButtonSize" @click="deleteItem(scope.row.id)">{{
              $t('add.add020')
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 16px 0; float: right">
        <el-pagination
          background
          :current-page.sync="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
      <el-form label-width="100px">
        <!-- <el-form-item label="类型名称">
                    <el-input v-model="form.paramCode" :placeholder="$t('add.add148')" style="width: 260px;"></el-input>
                </el-form-item> -->
        <el-form-item :label="$t('add.add117')">
          <el-input
            v-model="form.paramValue"
            :disabled="dis"
            :placeholder="$t('add.add148')"
            style="width: 260px"
          />
        </el-form-item>
        <!-- <el-form-item label="备注">
                    <el-input v-model="form.remark" :placeholder="$t('add.add148')" style="width: 260px;"></el-input>
                </el-form-item> -->
        <el-form-item :label="$t('add.add130')">
          <el-radio-group v-model="form.paramType">
            <el-radio :disabled="dis" :label="1">正常</el-radio>
            <el-radio :disabled="dis" :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button :size="optionButtonSize" @click="cancel">{{ $t('add.add203') }}</el-button>
        <el-button v-if="!dis" :size="optionButtonSize" type="primary" @click="submit"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'Home',

  data() {
    return {
      form: {
        paramValue: '',
        paramType: null,
        paramCode: 'work_order_type',
        remark: '',
      },
      page: 1, // 默认第1页
      limit: 20, // 每页条数
      total: 0, // 总条数
      tableData: [],
      dialogVisible: false,
      itemId: '',
      title: this.$t('add.add54'),
      dis: false,
    };
  },

  created() {
    this.getList();
  },

  methods: {
    getList() {
      this.$http
        .get(`/sys/params/page?page=${this.page}&limit=${this.limit}&paramCode=work_order_type`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
            if(this.tableData.length <= 0 && this.page > 1){
              this.page -= 1;
              this.getList();
            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    deleteItem(id) {
      this.$confirm(this.$t('add.add055'), this.$t('add.add140'), {
        confirmButtonText: this.$t('add.add81'),
        cancelButtonText: this.$t('add.add203'),
        type: 'warning',
      })
        .then(async () => {
          this.$http
            .delete(`/sys/params?id=${id} `)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              } else {
                this.$message.success(this.$t('add.add66'));
                this.getList();
              }
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
    cancel() {
      this.dialogVisible = false;
      this.form = {
        paramValue: '',
        paramType: null,
        remark: '',
      };
    },
    updateItem(val) {
      this.form = val;
      this.title = this.$t('patient.huanzhe17');
      this.dis = false;
      this.dialogVisible = true;
    },
    addItem(val) {
      this.form = val;
      this.title = this.$t('add.add132');
      this.dis = true;
      this.dialogVisible = true;
    },
    submit() {
      console.log('this.form', this.form);
      if (!this.form.paramValue) {
        return this.$message.error('请输入工单类型');
      }
      if (this.title == '添加') {
        this.$http
          .post('/sys/params', this.form)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            } else {
              this.$message.success('新增成功');
              this.itemId = '';
              this.dialogVisible = false;
              this.form = {
                paramValue: '',
                paramType: null,
                remark: '',
              };
              this.getList();
            }
          })
          .catch((err) => {
            console.log('err', err);
          });
      } else if (this.title == this.$t('patient.huanzhe17')) {
        this.form.dictTypeId = this.itemId;
        this.$http
          .put('/sys/params', this.form)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            } else {
              this.$message.success('编辑成功');
              this.itemId = '';
              this.dialogVisible = false;
              this.form = {
                paramValue: '',
                paramType: null,
                remark: '',
              };
              this.getList();
            }
          })
          .catch((err) => {
            console.log('err', err);
          });
      }
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.person_homeView {
  height: 100%;

  .el-header {
    color: #333;
  }

  .el-aside {
    background-color: transparent;
    // color: #333;
    text-align: center;

    // padding-left: 12px;
    // line-height: 200px;
    .el-menu {
      border: none;
    }
  }

  .el-main {
    background-color: #f8f8f8;
    // color: #333;
    text-align: left;
    padding: 10px !important;
  }

  .el-container {
    height: 100%;
  }

  .nav_back {
    margin-top: 15px;
    padding-left: 5px;

    .title {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #4884e5;
    }
  }
}

.el-menu-item.is-active {
  background-color: #e6ecf0 !important;
}

.partner_inner {
  margin-top: 20px;
}
</style>
